<template>
  <!--产品列表右侧部分-->
  <!--重构时按字段名是否有显示相应模块，开发时根据接口响应包再修正-->
  <div class="right_column">
    <p class="product_name ellipsis-2">{{ calcProdName }}</p>
    <slot>
      <div>
        <span class="product_tags" :class="listWrapClass" v-if="prodTags.length">
          <span class="code" v-if="listWrapClass=='asset'">{{ productInfo.prodCode }}</span>
          <span class="product_tag" v-for="(tag, index) in prodTags" :key="index">{{ tag }}</span>
        </span>
      </div>

      <div class="sub_text" v-if="productInfo.desc">
        <span>{{productInfo.desc}}</span>
        <span v-if="productInfo.risk">|</span>
        <span>{{productInfo.risk}}</span>
      </div>
    </slot>
  </div>
</template>

<script>
import { mapState } from 'vuex';
// import Common from '@/utils/common';

const Common = require('@/utils/common').default;

export default {
  name: 'ProductRight',
  props: ['productInfo', 'listWrapClass'],
  data() {
    return {
      // prodTags: []
    };
  },
  computed: mapState({
    userInfo: (state) => state.userInfo || '0',
    calcProdName() {
      let prodName = '--';
      if (this.productInfo.stock_code) {
        // 天添金
        prodName = `天添金${this.productInfo.stock_name}`;
        return prodName;
      }
      // 其他
      prodName = this.productInfo.prodName;
      return prodName;
    },
    prodTags() {
      const prodTags = [];
      if (this.productInfo.stock_code) {
        // 天添金
        prodTags.push('报价回购');
        prodTags.push(this.productInfo.purchaseFirst);
        return prodTags;
      }
      // 栏目基金 或 首发基金
      if (this.productInfo.columnCode || this.productInfo.mainTag) {
        return this.productInfo.tagList;
      }
      // 其他产品
      return this.productInfo.tagList;
    }
  }),
  beforeMounted() {
    // Common = require('@/utils/common').default;
  }
};
</script>

<style lang="less" scoped>
// .ipo_fund{
//   .product_tags{
//     font-size: 12px;
//     color: #999;
//   }
// }
.code{
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  margin-right: 8px;
}
</style>